import { Component } from "react";
import "./BookLoader.css"
import MDRenderer from "./MDRenderer";

export default
class BookLoader extends Component {
  
  constructor(props) {
    super(props);

    this.state={
      BookUrl:"",
      ChapterUrl:"",

      ChapterList:[],
      SelectedIndex: -1,

      SelectedSection: -1,

      UnfoldAll: false,
    }

    this.handleIndexChanged = this.handleIndexChanged.bind(this);
    this.handleSectionChanged = this.handleSectionChanged.bind(this);
  }

  componentDidMount(){
    const book = this.props.Book || [];
    const baseUrl = this.props.BaseUrl;
    const entry = book.entry;
    const index = book.index ? book.index : 'index.json';
    if( entry ) {
      const url = `${baseUrl}/${entry}`;

      fetch( `${url}/${index}` ).then( response=> { return response.json(); })
      .then(json=>{
        console.log(json)
        if( json.Indexes ) {
          this.setState({ 
            BookUrl: url,
            ChapterList: json.Indexes,
            SelectedIndex: -1,
            Text:""
          });
        }
      })
    }
  }

  handleIndexChanged( event ) {
    // 加载MD文件
    const chapter = this.state.ChapterList[event.target.id];
    const entry = chapter.entry;
    const md = chapter.md ? chapter.md : "README.md";

    const url = `${this.state.BookUrl}/${entry}`;

    fetch(`${url}/${md}`).then( response=> { 
      if( response.ok ) {
        return response.text(); 
      }
      return "## null";
    })
    .then(txt=>{

      this.setState( {
        ChapterUrl : url,
        SelectedIndex: parseInt (event.target.id),
        SelectedSection: -1,
        Text: txt,
      })
    })
  }

  handleSectionChanged( event ) {
    const chapter = this.state.ChapterList[this.state.SelectedIndex];
    const section = chapter.sections[event.target.id];
    const entry = section.entry ? section.entry : section.name;
    const md = section.md ? section.md : "README.md";

    const url = `${this.state.ChapterUrl}/${entry}`;

    fetch(`${url}/${md}`).then( response=> { 
      if( response.ok ) {
        return response.text(); 
      }
      return "## null";
    })
    .then(txt=>{
      this.setState( {
        SelectedSection: parseInt(event.target.id),
        Text: txt,
      })
    })

  }
  
  renderChapters(sections, lv=0){
    sections = sections || this.state.ChapterList;
 
    return sections.map((value, index)=>
      <div className={`book-link${lv}`} key={index}>
        <label className={
          (lv === 0 && this.state.SelectedIndex === index) || 
          (lv === 1 && this.state.SelectedSection === index)
            ? " clickable selected":" clickable "} 
          id={index} onClick={lv === 0 ? this.handleIndexChanged : this.handleSectionChanged}>{value.name}</label>
        
        { 
          (this.state.SelectedIndex === index || this.state.UnfoldAll ) && (lv <= 0)
            ? this.renderChapters(value.sections, lv+1):""
        }
      </div>
    );
  }

  render(){
    return(
      <div className="book-root">
        <div className="book-menu">
          <label>{this.props.Book.name?this.props.Book.name:""}</label>
        </div>
        <div className="book-containt">
          <div className="book-chapter">
            {this.renderChapters()}
          </div>
          <div className="book-content">
            <MDRenderer Text={this.state.Text}/>
          </div>
        </div>
        {/* {this.renderChapters()} */}
      </div>
    )
  }
}